<template>
  <div class="container">
    <ul class="list">
      <li class="list-item"
          v-for="(item, index) in shopList"
          :key="index">
        <div class="goods-logo">
          <img :src="imgUrl+item.images"
               v-if="imgUrl"
               alt
               class="img" />
        </div>
        <div class="goods-info">
          <div class="goods-name">{{item.title}}</div>
          <div class="spec clearfix">
            {{item.spec_stem}}
            <div class="goods-num">×{{item.good_num}}</div>
          </div>
          <div class="price">
            <!-- 现金 -->
            <div class="money"
                 v-if="item.deduction_credit-item.price<0">
              <div class="icon">￥</div>
              <div class="num"
                   v-if="item.deduction_credit_type==0">{{item.price}}</div>
              <div class="num"
                   v-else>{{(item.price*100-item.deduction_credit*100)/100}}</div>
            </div>
            <div class="icon-and"
                 v-if="item.deduction_credit_type!=0&&item.deduction_credit-item.price<0&&item.deduction_credit>0">+</div>
            <!-- 金币 -->
            <div class="coin"
                 v-if="item.deduction_credit_type==1&&item.deduction_credit>0">
              <div class="num gold">{{item.deduction_credit}}</div>
              <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/gold.png'"
                   v-if="ImgBaseUrl"
                   alt
                   class="icon" />
            </div>
            <!-- 银币 -->
            <div class="coin"
                 v-if="item.deduction_credit_type==2&&item.deduction_credit>0">
              <div class="num gray">{{item.deduction_credit}}</div>
              <img :src="ImgBaseUrl+'/mp_3.1.6/goldcoin/silver.png'"
                   v-if="ImgBaseUrl"
                   alt
                   class="icon" />
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource
    };
  },
  watch: {
    shopList () { }
  },
  props: ["shopList"]
};
</script>


<style lang="less" scoped>
.container {
  .list {
    .list-item {
      padding: 12px 10px;
      display: flex;
      .goods-logo {
        width: 90px;
        height: 90px;
        background: rgba(230, 230, 230, 1);
        border-radius: 6px;
        overflow: hidden;
        .img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 6px;
        }
      }
      .goods-info {
        flex: 1;
        margin-left: 10px;
        position: relative;
        .goods-name {
          font-size: 14px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .spec {
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 16px;
          margin-top: 6px;
          .goods-num {
            float: right;
            font-size: 12px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 16px;
          }
        }
        .price {
          position: absolute;
          bottom: 0;
          left: 0px;
          vertical-align: middle;
          .money {
            display: inline-block;
            vertical-align: middle;
            .icon {
              font-size: 12px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(255, 56, 62, 1);
              display: inline-block;
              vertical-align: baseline;
            }
            .num {
              font-size: 16px;
              font-family: "PingFangSC-Medium", "PingFang SC";
              font-weight: 500;
              color: rgba(255, 56, 62, 1);
              display: inline-block;
              vertical-align: baseline;
            }
          }
          .icon-and {
            color: rgba(202, 202, 202, 1);
            font-size: 14px;
            margin: 0px 2px;
            display: inline-block;
            vertical-align: middle;
            font-weight: bold;
          }
          .coin {
            display: inline-block;
            vertical-align: middle;
            .icon {
              width: 15px;
              height: 15px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 2px;
            }
            .num {
              font-size: 16px;
              font-family: "PingFangSC-Medium", "PingFang SC";
              font-weight: 500;
              display: inline-block;
              vertical-align: middle;
            }
            .gold {
              color: rgba(245, 208, 64, 1);
            }
            .gray {
              color: rgba(190, 204, 206, 1);
            }
          }
        }
      }
    }
  }
}
</style>